<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>基础折线图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;}</style>
</head>
<body>
<div id="mountNode"></div>
<div>
    <button>导出</button>
</div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<!-- <script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.9/g2.min.js"></script> -->
<!-- <script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/data-set.min.js"></script> -->
<script src="../js/g2.min.js"></script>
<script>
'use strict';
console.log(G2.Global.fontFamily);
// 定义 data
//  1) json 格式的对象数组
//  2) 对象中一个是 x, 一个是 y
var data = [
//{ year: '2001', value: 6 }
//, { year: '2002', value: 16 }
//, { year: '2003', value: 12 }
//, { year: '2004', value: 18 }
//, { year: '2005', value: 13 }
//, { year: '2006', value: 48 }
//, { year: '2007', value: 132 }
{ year: '2008', value: 280 }
, { year: '2009', value: 649 }
, { year: '2010', value: 1410 }
, { year: '2011', value: 2731 }
, { year: '2012', value: 2589 }
, { year: '2013', value: 7813 }
, { year: '2014', value: 12214 }
, { year: '2015', value: 14736 }
, { year: '2016', value: 23010 }
, { year: '2017', value: 27816 }
//, { year: '2018 年 5 月', value: 14179 }
];

var chart = new G2.Chart({
  container: 'mountNode',       // div 挂载点, 用 id 值就好了
  forceFit: true,               // 宽度自适应
  height: window.innerHeight - 50    // 但是要设置高度的
  //,font: "40px Arial"
 // ,fontSize: '40px'
});
chart.source(data);             // 加载数据
chart.scale('value', {          // scale, 设置 value 最小值是 0
  min: 0
});
chart.scale('year', {           
  range: [0, 1],                // scale, 将 year 字段归一化
  alias: '年'                   // 别名, 用于图例, 坐标轴, tooltip 等个性化显示
});
chart.tooltip({
  crosshairs: {
    type: 'line'                // 提示准星的类型
  }
});
// chart.line().position('year*value').size(2);    // 设置为 line 类型图标, year x, value y
chart.axis('year', {
label: {
    textStyle: {
     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
     //fill: '#fff', // 文本的颜色
     fontSize: '20', // 文本大小
     fontWeight: 'bold', // 文本粗细
 }
}
}).axis('value', {
label: {
    textStyle: {
     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
     //fill: '#fff', // 文本的颜色
     fontSize: '20', // 文本大小
     fontWeight: 'bold', // 文本粗细
 }
}
})
.line().position('year*value').size(2);    // 设置为 line 类型图标, year x, value y
// 下面生成点图, 点位置由 year, value 确定
chart.point().position('year*value').size(4).shape('circle')
.label('value', {
 //offset: 0,
 textStyle: {
     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
     //fill: '#fff', // 文本的颜色
     fontSize: '20', // 文本大小
     fontWeight: 'bold', // 文本粗细
 }
}).style({
  stroke: '#fff',
  lineWidth: 1
  //,font: "40px Arial"
  //,fontSize: '40px'
});
// 渲染 chart
chart.render();

// 设置点击事件(对点), 跳转到另一个页面(比如详情页)
chart.on('point:click', ev => {
  const data = ev.data;
  if (data) {
    const year = data._origin['year'];
    window.open('http://www.baidu.com/s?wd=' + year);
  }
});

// 导出图片
var btn = document.getElementsByTagName('button')[0]
btn.onclick = expImg

function expImg() {
    chart.downloadImage()
}


</script>
</body>
</html>

